<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<head>
    <meta charset="UTF-8">

    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

    <title>Title</title>
</head>
<body>
<div th:replace="~{common :: navbar}"></div>
<a type="button" class="btn btn-primary" th:href="@{/article/add}">新增</a>

<table class="table table-hover">
    <thead>
    <tr>
        <th>序号</th>
        <th>标题</th>
        <th>内容</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="article:${articles}">
        <td th:text="${article.id}"></td>
        <td th:text="${article.title}"></td>
        <td th:text="${article.content}"></td>

        <td>
            <a type="button" class="btn btn-warning" th:href="@{'/article/update/'+${article.id}}" sec:authorize="hasAuthority('ROLE_vip')">修改</a>
            <a type="button" class="btn btn-danger" th:href="@{'/article/delete/'+${article.id}}" sec:authorize="hasAuthority('ROLE_vip')">删除</a>
            <a type="button" class="btn btn-info" th:href="@{'/article/content/'+${article.id}}">查看</a>
        </td>
    </tr>
    </tbody>
</table>
<div class="container mt-3">
    <ul class="pagination">
        <li th:each="i:${#numbers.sequence(1, totalPages)}"
            th:class="${page==i} ? 'page-item active' : 'page-item'">
            <a class="page-link" th:href="@{'/article/'+${i}}" th:text="${i}">1</a>
        </li>
    </ul>
</div>
<!--<div class="container mt-3">-->
<!--    <ul class="pagination">-->
<!--        <li th:each="i:${#numbers.sequence(1, totalPages)}"-->
<!--            th:class="${page==i} ? 'page-item active' : 'page-item'">-->
<!--            &lt;!&ndash; 设置分页链接，使用Thymeleaf的th:href构建URL，指向对应的页数 &ndash;&gt;-->
<!--            <a class="page-link" th:href="@{'/student/'+${i}}"-->
<!--               th:text="${i}">1</a>-->
<!--        </li>-->
<!--    </ul>-->
<!--</div>-->
</body>
</html>